<template>
  <div>
    <div class="header">
      <h1>&lt;</h1>
      <input type="text" placeholder="请输入商家名，品类或商圈" />
    </div>
    <div class="nav">
      <ul class="top">
        <li>
          婚纱/礼服
          <img :src="b" />
        </li>
        <li>
          附近
          <img :src="b" />
        </li>
        <li>
          智能排序
          <img :src="b" />
        </li>
      </ul>
    </div>
    <div class="main">
      <ul class="main-1">
        <li>
          <div class="top">
            <img :src="a" />
            <div class="top-1">
              <h1>木槿新娘婚纱礼服馆</h1>
              <p><img :src="c" />5.0分</p>
              <div class="box">
                <h4>婚纱/礼服</h4>
                <img :src="d" />
                <span>文艺路</span>
                <i>7.7km</i>
              </div>
            </div>
          </div>
          <div class="bottom">
              <p>
                ￥1 <span>新款到店免费试纱</span>
              </p>
              <div class="p1">
                门市价：￥1 <span>已售411</span>
              </div><br>
              <p>
                ￥1 <span>【木槿新娘】礼服租赁</span>
              </p>
              <div class="p1">
                门市价：￥1 <span>已售2</span>
              </div>
              <span class="p2">查看其他8个团购</span>

          </div>
        </li>
      </ul>
    </div>
    <div class="main">
      <ul class="main-1">
        <li>
          <div class="top">
            <img :src="a" />
            <div class="top-1">
              <h1>木槿新娘婚纱礼服馆</h1>
              <p><img :src="c" />5.0分</p>
              <div class="box">
                <h4>婚纱/礼服</h4>
                <img :src="d" />
                <span>文艺路</span>
                <i>7.7km</i>
              </div>
            </div>
          </div>
          <div class="bottom">
              <p>
                ￥1 <span>新款到店免费试纱</span>
              </p>
              <div class="p1">
                门市价：￥1 <span>已售411</span>
              </div><br>
              <p>
                ￥1 <span>【木槿新娘】礼服租赁</span>
              </p>
              <div class="p1">
                门市价：￥1 <span>已售2</span>
              </div>
              <span class="p2">查看其他8个团购</span>

          </div>
        </li>
      </ul>
    </div>
    <div class="main">
      <ul class="main-1">
        <li>
          <div class="top">
            <img :src="a" />
            <div class="top-1">
              <h1>木槿新娘婚纱礼服馆</h1>
              <p><img :src="c" />5.0分</p>
              <div class="box">
                <h4>婚纱/礼服</h4>
                <img :src="d" />
                <span>文艺路</span>
                <i>7.7km</i>
              </div>
            </div>
          </div>
          <div class="bottom">
              <p>
                ￥1 <span>新款到店免费试纱</span>
              </p>
              <div class="p1">
                门市价：￥1 <span>已售411</span>
              </div><br>
              <p>
                ￥1 <span>【木槿新娘】礼服租赁</span>
              </p>
              <div class="p1">
                门市价：￥1 <span>已售2</span>
              </div>
              <span class="p2">查看其他8个团购</span>

          </div>
        </li>
      </ul>
    </div>
    <div class="main">
      <ul class="main-1">
        <li>
          <div class="top">
            <img :src="a" />
            <div class="top-1">
              <h1>木槿新娘婚纱礼服馆</h1>
              <p><img :src="c" />5.0分</p>
              <div class="box">
                <h4>婚纱/礼服</h4>
                <img :src="d" />
                <span>文艺路</span>
                <i>7.7km</i>
              </div>
            </div>
          </div>
          <div class="bottom">
              <p>
                ￥1 <span>新款到店免费试纱</span>
              </p>
              <div class="p1">
                门市价：￥1 <span>已售411</span>
              </div><br>
              <p>
                ￥1 <span>【木槿新娘】礼服租赁</span>
              </p>
              <div class="p1">
                门市价：￥1 <span>已售2</span>
              </div>
              <span class="p2">查看其他8个团购</span>

          </div>
        </li>
      </ul>
    </div>
    <div class="main">
      <ul class="main-1">
        <li>
          <div class="top">
            <img :src="a" />
            <div class="top-1">
              <h1>木槿新娘婚纱礼服馆</h1>
              <p><img :src="c" />5.0分</p>
              <div class="box">
                <h4>婚纱/礼服</h4>
                <img :src="d" />
                <span>文艺路</span>
                <i>7.7km</i>
              </div>
            </div>
          </div>
          <div class="bottom">
              <p>
                ￥1 <span>新款到店免费试纱</span>
              </p>
              <div class="p1">
                门市价：￥1 <span>已售411</span>
              </div><br>
              <p>
                ￥1 <span>【木槿新娘】礼服租赁</span>
              </p>
              <div class="p1">
                门市价：￥1 <span>已售2</span>
              </div>
              <span class="p2">查看其他8个团购</span>

          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: "../imgxl/lifu.jpg",
      b: "../img/xiabiao.jpg",
      c: "../img/wuxing.jpg",
      d: "../img/renqi.jpg",
      
    };
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 0.43rem;
  display: flex;
  justify-content: start;
  position: sticky;
  top: 0;
  background-color: #ffffff;
  z-index: 99;
}
.header > h1 {
  font-size: 0.2rem;
  margin-top: 0.08rem;
  margin-left: 0.15rem;
}
.header > input {
  width: 2.44rem;
  height: 0.28rem;
  background-color: #f3f4ef;
  border-radius: 0.3rem;
  border: #f3f4ef;
  text-align: center;
  margin-top: 0.1rem;
  margin-left: 0.28rem;
}
.nav {
  position: sticky;
  top: 0.43rem;
   z-index: 99;
}
.top {
  width: 100%;
  height: 0.25rem;
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
  margin-top: 0.15rem;
}
.top > li {
  width: 25%;
  height: 0.16rem;
  text-align: center;
  font-size: 0.12rem;
  line-height: 0.16rem;
  border-right: 2px #e8e8e8 solid;
}
.top > li > img {
  height: 0.06rem;
  width: 0.06rem;
}
.main-1{
  width: 95%;
  margin: auto;
  height: 2.11rem;
  position: relative;
}
.top>img{
  width: 0.67rem;
  height: 0.6rem;
  margin-right: 0.2rem;
}
.top-1{
  width: 2.9rem;
  height: 0.92rem;
}
.top-1>h1{
  font-size: 0.14rem;
}
.top-1>p>img{
  width: 0.8rem;
  height: 0.19rem;
  padding-top: 0.05rem;
  position: relative;
  top: 0.05rem;
}
.top-1>p{
  color: #fb8c20;
}
.box{
  display: flex;
  justify-content: start;
  padding-top: 0.15rem;
}
.box>h4{
  font-size: 0.10rem;
  font-weight: normal;
  margin-right: 0.03rem;
}
.box>img{
  width: 0.26rem;
  height: 0.13rem;
}
.box>span{
  margin-left: 1.17rem;
  font-size: 0.1rem;
}
.box>i{
  margin-left: 0.1rem;
  margin-top: 0.01rem;
}
.bottom{
  position: absolute;
  bottom: 0.25rem;
 
}
.bottom>p{
  font-size: 0.14rem;
  color: #fb8c20;
  margin-left: 0.48rem;
}
.bottom>p>span{
  font-size: 0.12rem;
  color: #696969;
  margin-left: 0.18rem;
}
.p1{
  font-size: 0.09rem;
   margin-left: 0.28rem;
}
.p1>span{
  margin-left: 2.2rem;
}
.p2{
  font-size: 0.12rem;
  color: #696969;
  margin-left: 1.2rem;
}
</style>